<!--
 * @Author: panda
 * @Date: 2022-05-18 12:25
 * @Description: 竞赛视图
-->
<template>
  <!-- 将分类名和分类下的视频卡片信息通过props传给NormalModule组件 -->
  <!-- v-if 处理异步数据请求延迟问题，数据接收了再发送给子组件NormalModule -->
  <div v-for="(videos, index) in videoList.videos" :key="index">
    <NormalModule
      :title="index"
      :videos="videos"
      v-if="typeof videoList.videos != 'undefined'"
    />
  </div>
</template>

<script lang="ts">
import { reactive } from "vue";
import NormalModule from "@/components/normalModule/NormalModule.vue";
import { videoApi } from "@/api/video";
import { VideoList } from "@/api/model/video";

export default {
  name: "CompetitionView",
  components: {
    NormalModule,
  },
  setup() {
    const page = "servant";
    // 通过自定义类声明当前视图的接收回来的响应式数据
    const videoList = reactive(new VideoList());
    videoApi
      .getVideoCardInfo({ page })
      .then((response: any) => {
        // data就是一个类目数组的对象
        videoList.videos = response.data.data;
      })
      .catch((error: any) => {
        console.log(error);
      });
    return {
      videoList,
    };
  },
};
</script>

<style scoped>
</style>
